<template>
  <pro-dialog ref="addExpDom" width="824" :nopadding="true" :title="tlpFlag?`编辑底片截取规则`:`新增底片截取规则`">
    <div class="modal-tpl" style="padding: 6px 24px 24px">
      <YsForm class="add-form" label-position="top" ref="addTpFrom" :rules="ruleValidate" :model="info" inline>
        <YsRow :gutter="16">
          <YsCol span="12">
            <YsFormItem label="规则名称" prop="exp_name">
              <YsInput type="text" size="large" maxlength="15" v-model.trim="info.exp_name" placeholder="请输入规则名称">
              </YsInput>
            </YsFormItem>
          </YsCol>
          <YsCol span="12">
            <YsFormItem label="规则编号" prop="exp_code">
              <YsInput type="text" size="large" maxlength="15" v-model.trim="info.exp_code" placeholder="请输入规则编号">
              </YsInput>
            </YsFormItem>
          </YsCol>
        </YsRow>
        <YsRow>
          <YsCol span="24">
            <YsFormItem label="备注">
              <YsInput v-model="info.remark" show-word-limit type="textarea" maxlength="30" placeholder="请输入" :autosize="{ minRows: 4, maxRows: 5 }"></YsInput>
            </YsFormItem>
          </YsCol>
        </YsRow>
        <YsRow class="foot-btn" style="margin-top: 4px">
          <YsButton size="large" @click="$refs.addExpDom.close()">取消</YsButton>
          <YsButton size="large" @click="submitTpClick('addTpFrom')" type="primary">确定</YsButton>
        </YsRow>
      </YsForm>
    </div>
  </pro-dialog>
</template>
<script>
import { mapActions } from "vuex";
export default {
  name: 'addExp',
  props: {
    expObj: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

  data() {
    return {
      tlpFlag: false,
      curTemplate: {},
      info: {
        exp_code: "",
        exp_name: "",
        exp_way: 1, //表达式方式：1-截取(目前只有1这种方式)
        remark: "",
      },
      ruleValidate: {
        exp_name: [
          { required: true, message: '请输入规则名称', trigger: 'blur' }
        ],
        exp_code: [
          { required: true, message: '请输入规则编号', trigger: 'blur' }
        ],
      },
    }
  },
  methods: {
    ...mapActions(['addSpringExpViewExpAPI', "editSpringExpViewAIP"]),
    //提交新增规则
    submitTpClick(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.tlpFlag) {
            this.exitExpFn()
          } else {
            this.addExpFn()
          }
        }
      })
    },
    // 新增
    addExpFn() {
      this.addSpringExpViewExpAPI({ info: this.info }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.$YsMessage.success(data.message_text);
          this.$parent.getNegativeList()
          this.$refs.addExpDom.close()
        } else {
          this.$YsMessage.error(msg);
        }
      }).catch(err => {
        this.page.tableLoad = false
        this.$YsMessage.error('新增失败');
      })
    },
    // 编辑
    exitExpFn() {

      this.editSpringExpViewAIP({ info: this.info }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.$YsMessage.success(data.message_text);
          this.$parent.getNegativeList()
          this.$refs.addExpDom.close()
        } else {
          this.$YsMessage.error(msg);
        }
      }).catch(err => {
        this.page.tableLoad = false
        this.$YsMessage.error('编辑失败');
      })
    },
    //打开弹出
    openTplModal(flag) {
      this.$refs.addTpFrom.resetFields()
      this.tlpFlag = flag
      if (flag) {
        let info = {
          id: this.$parent.expObj.id,
          exp_code: this.$parent.expObj.exp_code,
          exp_name: this.$parent.expObj.exp_name,
          remark: this.$parent.expObj.remark,
        }
        this.info = JSON.parse(JSON.stringify(info))
      } else {
        this.info = this.$options.data().info
      }
      this.$refs.addExpDom.show()
    }
  }
}
</script>

<style scoped lang='less'>
.modal-tpl {
  /deep/.ivu-form-item {
    width: 100%;
    margin-bottom: 24px;
    .ivu-input-word-count {
      top: initial;
      bottom: 10px;
    }
  }
  .foot-btn {
    /deep/ .ivu-btn {
      min-width: 96px !important;
    }
  }
}
</style>